import React, { Component } from 'react';
import './index.css'
const codeStatus={
    1:{
        class:'daifu',
        text:'代付款'
    },
    2:{
        class:'yifu',
        text:'已付款'
    },
    3:{
        class:'yitui',
        text:'已退款'
    }
}
class OrderItem extends Component {
    render() {
        const {status,title,img,code,price,num,orderId,createTime,payTime,refundTime,preferMoney=0,classNum} = this.props.orderInfo;
        return (
            <div className="orderItem">
                <p className="orderTop">
                    <span className="orderName">{title}</span>
                    <span className={`orderStatus ${codeStatus[status].class}`}>{codeStatus[status].text}</span>
                </p>
                <div className="orderMain">
                    <div className="left">
                        <div>
                            <div className="img"><img src={img} alt=""/></div>
                            <div className="classInfo">
                                课程编码: <br/>{code}   
                            </div>
                        </div>
                        <p>课时数：{classNum}</p>
                    </div>
                    <div className="right">
                        <strong>￥{price}</strong><br/><span>x{num}</span>
                    </div>
                </div>
                <div className="orderDetail">
                    <div className="orderMoney">
                        {preferMoney>0 && <p className="prefer"><span>优惠金额</span><span>-￥{preferMoney}</span></p>}
                        <p className="payMoney"><span>实付款</span><strong>￥{price*num-preferMoney}</strong></p>
                    </div>
                    <div className="orderInfo">
                        <p><strong>订单信息</strong></p>
                        <p>订单编号：{orderId}</p>
                        <p>下单时间：{createTime}</p>
                        {payTime && <p>支付时间：{payTime}</p>}
                        {refundTime && <p>退款时间：{refundTime}</p>}
                    </div>
                </div>
                {status===1 && <div className="orderBottom" style={{paddingBottom: '5rem'}}>
                    <p><button className="smBtn">去支付</button></p>  
                </div>}
            </div>
        );
    }
}

export default OrderItem;